<template>
    <div>
        
        <!-- <mt-swipe :auto="1000" class="swipe">
            <mt-swipe-item v-for="(item,index) in imgList" :key="index">
                <img :src="item.img" />
                
            </mt-swipe-item>
        </mt-swipe> -->
        <Swipe :imgList="imgList" :isFull="true"></Swipe>
        <!-- ******************************* -->
        <div class="list">
            <ul>
                <li v-for="item in glist " :key="item.id">
                    <router-link :to="item.router">
                        <img :src="item.src">
                    </router-link>
                    <!-- <router-view></router-view> -->
                    <p>{{item.title}}</p>
                </li>
            </ul>
        </div>
           
    </div>
    
</template>
<script>
  
export default{
    name:"Home",
    data(){
        return{
            imgList:[],
            glist:[
                {id:1,src:"../static/img/10.png",title:"新闻",router:{name:"newList"}},
                {id:2,src:"../static/img/11.png",title:"商品",router:{name:"goodsList"}},
                {id:3,src:"../static/img/12.png",title:"卯月",router:{name:"newList"}},
                {id:4,src:"../static/img/13.png",title:"文月",router:{name:"newList"}},
                {id:5,src:"../static/img/14.png",title:"霜月",router:{name:"newList"}},
                {id:6,src:"../static/img/15.png",title:"长月",router:{name:"newList"}},
                {id:7,src:"../static/img/16.png",title:"桜月",router:{name:"newList"}},
                {id:8,src:"../static/img/17.png",title:"雨月",router:{name:"newList"}},
                {id:9,src:"../static/img/18.png",title:"葉月",router:{name:"newList"}}
            ]
  
        }
    },
    created(){
        this.$axios.get("/getSwipe").then(res=>{
            console.log(res.data)
            this.imgList = res.data
        }).catch(err=>{
            console.log(err)
        })
    }
}

</script>
<style>
    *{
        margin:0px;
        padding:0px;
        list-style: none;
    }
    .swipe{
        height: 200px;
        background-color:skyblue;
    }
    .swipe img{
        display: inline-block;
        height: 200px;
        max-width: 100%;
        
    }
    .list{
        width:100%;
    }
    .list ul{
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        margin-left:20px;
        
    }
    .list ul li{
        width:30%;
        height: 100px;
        text-align: center;  
        
    }
    .list ul li a{
        display: inline-block;
        width: 50px;
        height: 50px;
        
        font-size: 15px;
        
    }
    .list ul li a img{
        width: 50px;
    }

</style>